<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-06-09 09:41:35
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-10 16:21:17
 * @FilePath: \nien-vue3-admin\src\views\finance\invoiceManangement\index.vue
 * @Description: 开票管理
-->
<template>
  <custom-container ref="customContainerRef" :config="config" />
  <detail-dialog ref="detailDialogRef" />
  <billing-dialog ref="billingDialogRef" />
</template>
<script setup lang="ts">
import { computed, reactive, defineAsyncComponent, ref } from 'vue'
import { ElButton, ElMessageBox, ElMessage } from 'element-plus'
import { DictDirection } from '@/store/modules/dicts'
import { getList, pushBilling } from '@/api/finance/billing'

const DetailDialog = defineAsyncComponent(() => import('./components/DetailDialog.vue'))
const BillingDialog = defineAsyncComponent(() => import('./components/BillingDialog.vue'))

const billingDialogRef = ref()
const detailDialogRef = ref()

const queryParams = reactive({
  pageSize: 10,
  pageNum: 1,
  serialNo: undefined,
  customerName: undefined,
  status: undefined,
})
const config = computed({
  get() {
    return {
      query: {
        fields: [
          {
            label: '账单编号',
            prop: 'serialNo',
          },
          {
            label: '客户代码',
            prop: 'customerName',
          },
          {
            type: 'select',
            label: '状态',
            prop: 'status',
            option: {
              clearable: true,
              dictInfo: {
                dict: DictDirection.开票状态,
              },
            },
          },
        ],
        queryParams,
        formOption: {},
      },
      btns: [],
      table: {
        columns: [
          { type: 'selection', width: '55', align: 'center' },
          { label: '对账单日期', align: 'center', prop: 'statementDate' },
          { label: '对账单编号', align: 'center', prop: 'serialNo' },
          { label: '客户名称', align: 'center', prop: 'customerName' },
          { label: '发票金额', align: 'center', prop: 'totalAmount' },
          { label: '收款账号', align: 'center', prop: 'collectionAccountNo' },
          { label: '转入方名称', align: 'center', prop: 'transferAccountNo' },
          { label: '纳税人识别号', align: 'center', prop: 'identificationNo' },
          { label: '地址及电话', align: 'center', prop: 'addressAndTelephoneNo' },
          { label: '开户行及账号', align: 'center', prop: 'bankAccountNo' },
          { label: '邮箱', align: 'center', prop: 'mail' },
          { label: '状态', align: 'center', prop: 'status' },
          {
            label: '操作',
            align: 'center',
            minWidth: '250',
            fixed: 'right',
            render(h, { row }) {
              return [
                h(
                  ElButton,
                  {
                    text: true,
                    type: 'primary',
                    onClick: () => {
                      billingDialogRef.value.open(row.id)
                    },
                  },
                  {
                    default: () => '开票',
                  },
                ),
                h(
                  ElButton,
                  { 
                    text: true,
                    type: 'primary',
                    onClick: () => {
                      detailDialogRef.value.open(row.serialNo)
                    },
                  },
                  {
                    default: () => '开票详情',
                  },
                ),
                h(
                  ElButton,
                  {
                    text: true,
                    type: 'primary',
                    loading: !!row.loading,
                    onClick: () => {
                      ElMessageBox.confirm('敏感操作，是否继续？', '警告', {
                        type: 'warning',
                      }).then(() => {
                        row.loading = true
                        pushBilling({
                          id: row.id,
                          status: row.status,
                        }).then(({ code }) => {
                          if (code === 200) {
                            ElMessage.success('推送成功！')
                          }
                        }).finally(() => {
                          row.loading = false
                        })
                      })
                    },
                  },
                  {
                    default: () => '推送到客户端',
                  },
                )]
            },
          },
        ],
        event: {
        },
      },
      api: getList,
    }
  },
  set(val) {
    return val
  },
})

</script>